<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>欢迎</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="jumbotron" style="text-align: center;">
    <h1>设计模式</h1>
</div>
<div class="container">
    <div class="row">
<div class="panel panel-default" style="width:560px;margin:0 auto auto auto;text-align:center">
    <div class="panel-heading"><h2>LOG IN</h2></div>
    <div class="panel-body">
        <br>
        <form id="myform" action="welcome.jsp" method="post" role="form">
            <div class="alert alert-warning alert-dismissible" id="nameBox" role="alert" style="display: none"><b>Warning!</b> 用户名不得少于3位!</div>
            <div class="input-group">
                <span class="input-group-addon" >用户名：</span>
                <input id="username" name="username" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
            </div>
            <br>
            <div class="alert alert-warning alert-dismissible" id="pwdBox" role="alert" style="display: none"><b>Warning!</b> 密码不得少于5位!</div>
            <div class="input-group">
                <span class="input-group-addon" >密&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
                <input id="password" name="password" type="password" class="form-control" placeholder="password" aria-describedby="basic-addon1">
            </div>
            <br>
            <div class="alert alert-warning alert-dismissible" id="codeBox" role="alert" style="display: none"><b>Warning!</b> 验证码错误!</div>
            <div style="width:70%;float: left">
                <div class="input-group">
                    <span class="input-group-addon">验证码：</span>
                    <input type="text" id="checkcode" name="checkcode" class="form-control" placeholder="CheckCode" aria-describedby="sizing-addon1">
                </div>
            </div>

            <div style="width: 30%;float: left">
                <img id="codeImg" src="${pageContext.request.contextPath}/action/CheckCode" onclick="refreshCode()">
            </div>
            <br><br><br>
            <input type="hidden" name="actionName" value="Log_check">
            <div >
                <input class="btn btn-default" type="button" onclick="check()" value="登陆">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input class="btn btn-default" type="button" onclick="location='join.jsp'" value="注册">
            </div>
        </form>
    </div>
</div>
    </div>
</div>
<script>
    $("#username").click(function () {
        $("#nameBox").hide();
    });
    $("#password").click(function () {
        $("#pwdBox").hide();
    });
    $("#checkcode").click(function () {
        $("#codeBox").hide();
    });
    function check() {
        var username = $("#username").val();
        var password = $("#password").val();

        if (username !== null && username.length > 2) {
            if (password !== null && password.length > 4) {
                $.ajax({
                    url: "/patterns/JServlet",
                    type: "POST",
                    dataType:"text",
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    data: $("#myform").serialize(),
                    success:function (data,status) {
                        if(data.search("log_suc")!==-1){
                            console.log("跳转");
                            document.getElementById('myform').submit();
                        }else if(data.search("errorCode")!==-1) {
                            $("#codeBox").show();
                        }else if(data.search("errorUserPwd")!==-1){
                            alert("用户名或密码错误！请重新输入！");
                        }else {
                            alert("数据发送状态："+status+"\n【可能是数据库连接失败！】");
                        }
                    }
                });
            } else {
                $("#pwdBox").show();
            }
        } else {
            $("#nameBox").show();
        }
    }
</script>
</body>
</html>
